/**
 * @authors tanqichao
 * @date    2017-03-21 13:59:27
 * @module  数据统计
 */

import { AreaChart, Area, LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'Recharts';
import { columns } from './statisticsColumns';
import { Row, Col, Table, Radio } from 'antd';
import React, { Component, PropTypes } from 'react';
import Styles from './indexPage.less';
import { connect } from 'dva';
import 'moment/locale/zh-cn';
import moment from 'moment';

moment.locale('zh-cn');

const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;

const CustomTooltip  = React.createClass({
  propTypes: {
    type: PropTypes.string,
    payload: PropTypes.array,
    label: PropTypes.string,
  },
  renderText() {
    const { title, payload } = this.props;
    if (title === 'consumeTotal') {
      return (
      	<p>总消耗：{payload[0].value}</p>
    	);
    } else if (title === 'avgPrice') {
      return (
      	<p>点击均价：{payload[0].value}</p>
    	);
    } else if (title === 'clickRate') {
      return (
      	<p>点击率：{payload[0].value}%</p>
    	);
    } else if (title === 'clickCountExposureCount') {
    	return (
    		<div>
    			<p className={Styles.pb5}>曝光：{payload[0].value}</p>
    			<p>点击次数：{payload[1].value}</p>
    		</div>
  		);
    }
  },
  render() {
    const { active, title } = this.props;
    if (active) {
      const { payload, label } = this.props;
      return (
        <div className={Styles.chartingBox}>
          <p className={Styles.pb5}>{label}</p>
         	{this.renderText()}
        </div>
      );
    }
    return null;
  }
});

class Charting extends Component {
	render () {
	  const { list } = this.props.statistics;
	  const toPercent = (decimal, fixed = 0) => {
			return `${decimal.toFixed(fixed)}%`;
		};
		return (
			<div className={Styles.charting}>
			<Row>
				<Col span={12} className={Styles.borderRight}>
					<p className={Styles.titleClickCount}>曝光/点击</p>
					{list && list.length ?
					<ResponsiveContainer width="100%" height={190}>
						<LineChart data={list} margin={{top: 0, right: 40, left: -20, bottom: 20}}>
							<XAxis dataKey="curDate"/>
							<YAxis/>
							<CartesianGrid strokeDasharray="3 3"/>
							<Legend verticalAlign="top" />
							<Tooltip  content={<CustomTooltip title="clickCountExposureCount" />} />
							<Line name="曝光量" type="monotone" dataKey="exposureCount" stroke="#54c6d0" strokeWidth={2} activeDot={{r: 5}}/>
							<Line name="点击次数" type="monotone" dataKey="clickCount" stroke="#ef4b43" strokeWidth={2} activeDot={{r: 5}}/>
						</LineChart>
					</ResponsiveContainer>: <p className={Styles.noData}>暂无数据</p>}
				</Col>
				<Col span={12}>
					<p className={Styles.titleClickRate}>点击率</p>
					{list && list.length ?
					<ResponsiveContainer width="100%" height={190}>
						<LineChart data={list} margin={{top: 0, right: 25, left: 0, bottom: 20}}>
			        <XAxis dataKey="curDate"/>
			        <YAxis yAxisId="left" orientation="left" tickFormatter={toPercent} />
			        <CartesianGrid strokeDasharray="3 3"/>
			        <Tooltip  content={<CustomTooltip title="clickRate" />} />
			        <Line yAxisId="left" type="monotone" dataKey="clickRate" strokeWidth={2} stroke="#ff6f29" activeDot={{r: 5}}/>
			      </LineChart></ResponsiveContainer> : <p className={Styles.noData}>暂无数据</p>}
				</Col>
			</Row>
			<Row className={Styles.borderTop}>
				<Col span={12} className={Styles.borderRight}>
					<p className={Styles.titleAvgPrice}>点击均价</p>
					{list && list.length ?
					<ResponsiveContainer width="100%" height={190}>
						<LineChart data={list} margin={{top: 5, right: 40, left: -20, bottom: 0}}>
			        <XAxis dataKey="curDate"/>
			        <YAxis/>
			        <CartesianGrid strokeDasharray="3 3"/>
			        <Tooltip content={<CustomTooltip title="avgPrice" />} />
			        <Line type="monotone" dataKey="avgPrice" strokeWidth={2} stroke="#71ccd8" activeDot={{r: 5}}/>
			      </LineChart></ResponsiveContainer>: <p className={Styles.noData}>暂无数据</p>}
				</Col>
				<Col span={12}>
					<p className={Styles.titleConsumeTotal}>总消耗</p>
					{list && list.length ?
					<ResponsiveContainer width="100%" height={190}>
						<LineChart data={list} margin={{top: 5, right: 25, left: 0, bottom: 0}}>
			        <XAxis dataKey="curDate"/>
			        <YAxis/>
			        <CartesianGrid strokeDasharray="3 3"/>
			        <Tooltip content={<CustomTooltip title="consumeTotal" />} />
			        <Line type="monotone" dataKey="consumeTotal" strokeWidth={2} stroke="#fda757" activeDot={{r: 5}}/>
			      </LineChart></ResponsiveContainer>: <p className={Styles.noData}>暂无数据</p>}
				</Col>
			</Row>
			</div>
		)
	}
};

export default connect((state) => {
  const { statistics } = state.indexPage;
  return {
    statistics
  }
})(Charting);
